<template>
	<div class="user-edit">
		<!-- Drawer抽屉 -->
		<Drawer :title="title" v-model="visible" width="720" draggable :mask-closable="type == '0'">
			<div :style="{ maxHeight: maxHeight }" class="drawer-content">
				<Form ref="form" :model="form" :rules="formValidate" label-position="top">
					<FormItem label="图片路径" prop="pic">
						<upload-pic-input v-model="form.pic"></upload-pic-input>
					</FormItem>
					<FormItem label="图片链接" prop="url">
						<Input v-model="form.url" autocomplete="off" :maxlength="16" />
					</FormItem>
				</Form>
			</div>
			<div class="drawer-footer br" v-show="type != '0'">
				<Button type="primary" :loading="submitLoading" @click="submit">提交</Button>
				<Button @click="visible = false">取消</Button>
			</div>
		</Drawer>
	</div>
</template>

<script>
import { insertOrUpdateSwiper } from '@/api/index';
import uploadPicInput from '@/views/my-components/xboot/upload-pic-input';
export default {
	name: 'user',
	components: {
		uploadPicInput
	},
	props: {
		value: {
			type: Boolean,
			default: false
		},
		data: {
			type: Object
		},
		type: {
			type: String,
			default: '0'
		}
	},
	data() {
		return {
			visible: this.value,
			title: '',
			submitLoading: false,
			maxHeight: 510,
			form: {
				pic: '',
				url: '',
				type: 1
			},
			formValidate: {
				// 表单验证规则
				pic: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
			}
		};
	},
	methods: {
		submit() {
			this.$refs.form.validate(valid => {
				if (valid) {
					if (this.type == '1') {
						// 编辑
						this.submitLoading = true;
						insertOrUpdateSwiper(this.form).then(res => {
							this.submitLoading = false;
							if (res.success) {
								this.$Message.success('操作成功');
								this.$emit('on-submit', true);
								this.visible = false;
							}
						});
					} else {
						// 添加
						this.submitLoading = true;
						insertOrUpdateSwiper(this.form).then(res => {
							this.submitLoading = false;
							if (res.success) {
								this.$Message.success('操作成功');
								this.$emit('on-submit', true);
								this.visible = false;
							}
						});
					}
				}
			});
		},
		setCurrentValue(value) {
			if (value === this.visible) {
				return;
			}
			if (this.type == '1') {
				this.title = '编辑轮播图';
				this.maxHeight = Number(document.documentElement.clientHeight - 121) + 'px';
			} else if (this.type == '2') {
				this.title = '添加轮播图';
				this.maxHeight = Number(document.documentElement.clientHeight - 121) + 'px';
			} else {
				this.title = '轮播图详情';
				this.maxHeight = '100%';
			}
			// 清空数据
			this.$refs.form.resetFields();
			if (this.type == '0' || this.type == '1') {
				// 回显数据
				let data = this.data;
				// 回显
				this.form = data;
			} else {
				// 添加
				this.form = {
					type: 1,
					pic: '',
					url: ''
				};
			}
			this.visible = value;
		}
	},
	watch: {
		value(val) {
			this.setCurrentValue(val);
		},
		visible(value) {
			this.$emit('input', value);
		}
	}
};
</script>

<style lang="less">
@import '../../../styles/drawer-common.less';
</style>
